<template>
  <page-header-wrapper :title="false">
    <div class="Role">
      <a-spin tip="加载中..." class="position" v-if="roleLoading"> </a-spin>
      <a-modal width="1000px" v-model="modleVisible" title="消息" @cancel="() => (this.modleVisible = false)">
        <template slot="footer">
          <Button
            type="reset"
            label="关闭"
            @click="
              () => {
                this.modleVisible = false;
              }
            "
          ></Button>
        </template>
        <div id="modalContent">
          <div class="modalContentForm">
            <a-form-model ref="formRef" :model="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
              <a-row type="flex" justify="space-between">
                <a-col :span="24">
                  <Input :form="form" label="消息标题" prop="title" placeholder=" " readonly></Input>
                </a-col>
                <a-col :span="24">
                  <Textarea :form="form" label="消息内容" prop="content" :rows="6" placeholder=" " readonly></Textarea>
                </a-col>
                <a-col :span="24">
                  <Textarea :form="form" label="提示" prop="remark" :rows="4" placeholder=" " readonly></Textarea>
                </a-col>
              </a-row>
            </a-form-model>
          </div>
        </div>
      </a-modal>
      <typicalSearch ref="insideSearch" :searchConfig="searchConfig" @searchMethod="getTableData"></typicalSearch>
      <div class="table">
        <div class="tableTitle">
          <div class="title">我的消息</div>
          <div class="addButton">
            <span style="margin-right: 8px" v-show="selectedRowKeys.length > 0">
              {{ `当前选择 ${selectedRowKeys.length} 条数据` }}
            </span>
            <a-button
              type="primary"
              :disabled="selectedRowKeys.length === 0 || isRead || isDel"
              :loading="isRead"
              @click="read(1)"
            >
              批量已读
            </a-button>
            <a-popconfirm
              slot="action"
              title="此操作将删除已勾选的数据，是否继续?"
              ok-text="是"
              cancel-text="否"
              @confirm="read(-1)"
            >
              <Button
                type="batchDelete"
                :disabled="selectedRowKeys.length === 0 || isRead || isDel"
                :loading="isDel"
                style="margin-left: 5px"
              ></Button>
            </a-popconfirm>
          </div>
        </div>
        <div class="tableList">
          <typicalTable
            ref="insideTable"
            :tableConfig="tableConfig"
            :tableData="tableData"
            @getTableData="getTableData"
            @selectionChange="tableChange"
          >
            <template v-slot="slotProps">
              <Button label="查看" @click="handleEdit(slotProps.record)"></Button>
              <!-- <a-popconfirm
                slot="action"
                title="此操作将删除该条数据，是否继续?"
                ok-text="是"
                cancel-text="否"
                @confirm="handleDelete(slotProps.record)"
              >
                <Button type="stop" label="删除"></Button>
              </a-popconfirm> -->
            </template>
          </typicalTable>
        </div>
      </div>
    </div>
  </page-header-wrapper>
</template>
<script>
import moment from 'moment';
import typicalSearch from '@/components/typicalSearch';
import typicalTable from '@/components/typicalTable';
import Button from '@/components/typicalControl/button';
import Input from '@/components/typicalControl/Input';
import Textarea from '@/components/typicalControl/textarea';
import { getYesNo } from '@/utils/frequentInterface';

import { listUserMessages } from '@/api/cabin';
export default {
  name: 'ChargingUser',
  components: {
    typicalSearch: typicalSearch,
    Button: Button,
    Input: Input,
    Textarea: Textarea,
    typicalTable: typicalTable,
  },
  data() {
    return {
      isDel: false,
      modleVisible: false,
      roleLoading: false, // 加载表格的loading
      form: {
        title: undefined,
        content: undefined,
        remark: undefined,
        isEnable: 1,
        isSystem: 0,
      },
      // 搜索组件配置
      searchConfig: {
        formItemList: [
          {
            type: 'select',
            prop: 'searchIsLook',
            value: undefined,
            optList: [],
            label: '是否已读',
          },
        ],
        parent: this,
      },
      // 列表组件配置
      tableConfig: {
        columns: [
          {
            title: '标题',
            dataIndex: 'title',
            width: '300px',
            ellipsis: true,
          },
          {
            title: '内容',
            dataIndex: 'content',
            ellipsis: true,
          },
          {
            title: '是否已读',
            dataIndex: 'status',
            scopedSlots: { customRender: 'isYesNo' },
            width: '120px',
          },
          {
            title: '接收时间',
            dataIndex: 'messageCreateTime',
            ellipsis: true,
            customRender: this.formatterTime,
            width: '220px',
          },
          {
            title: '操作',
            scopedSlots: { customRender: 'action' },
            ellipsis: true,
            width: '80px',
          },
        ],
        pageSize: this.$store.state.user.defaultPaginationPagesize,
        pageSizeOptions: this.$store.state.user.defaultPaginationOptions,
        parent: this,
        isSelection: true,
      },
      // 列表组件数据
      tableData: {
        records: [],
        total: 0,
      },
      selectedRowKeys: [],
      isRead: false,
    };
  },
  created() {
    this.searchConfig.formItemList[0].optList = this.getYesNo();
  },
  mounted() {
    this.$refs.insideSearch.searchInfo();
  },
  methods: {
    getYesNo,
    /**
     * [getTableData 获取表格数据]
     * @param  {[type]} searchParam [搜索条件]
     * @return {[type]}             [description]
     */
    getTableData(searchParam) {
      if (!searchParam) throw new Error('getTableData 没有入参搜索条件！');
      this.roleLoading = true;
      searchParam.searchUser = this.$store.state.user.id;
      let params = {
        pageNum: searchParam.pageNumber + 1,
        pageSize: searchParam.pageSize,
        status: searchParam.searchIsLook,
      };
      listUserMessages('/selectMessageUserList', 'get', params)
        .then((res) => {
          if (res.code === 200 && res.data.records) {
            this.tableData = res.data;
          } else {
            this.tableData.records = [];
            this.tableData.total = 0;
          }
        })
        .finally(() => {
          this.roleLoading = false;
        });
    },
    /**
     * [tableChange table多选变化]
     * @param  {[type]} index  [序号]
     * @param  {[type]} arrObj [数组对象]
     * @return {[type]}        [description]
     */
    tableChange(index, arrObj) {
      this.selectedRowKeys = arrObj.map((n) => {
        return n.id;
      });
    },
    /**
     * [read 已读或批量已读]
     * @param  {[type]} row [单条已读]
     * @return {[type]}     [description]
     * status 1,批量已读；-1 批量删除
     */
    read(status, row) {
      var list = [];
      if (row) {
        list.push(row.id);
      } else {
        this.isRead = true;
        list = this.selectedRowKeys;
      }
      listUserMessages(`/updateStatusBatch?Ids=${list}&status=${status}`, 'put')
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(status && status == -1 ? '批量删除成功' : '批量已读成功');
            if (row) {
            } else {
              this.selectedRowKeys = [];
              this.$refs.insideTable.setSelectedRowKeys(this.selectedRowKeys);
            }
            this.$refs.insideSearch.searchInfo();
          }
        })
        .finally(() => {
          this.isRead = false;
        });
    },
    /**
     * [initializationForm 初始化form数据]
     * @return {[type]} [description]
     */
    initializationForm() {
      return {
        title: undefined,
        content: undefined,
        remark: undefined,
        isEnable: 1,
        isSystem: 0,
      };
    },
    /**
     * [handleEdit 打开详情]
     * @param  {[type]} row [单行数据]
     * @return {[type]}     [description]
     */
    handleEdit(row) {
      this.form = this.initializationForm();
      listUserMessages('/selectMessageById', 'get', { Id: row.id ? row.id : '', status: row.status }).then((res) => {
        if (res.code === 200) {
          this.form = res.data;
        }
      });
      this.modleVisible = true;
      // if (row.status === 0) {
      //   this.read(1, row);
      // }
    },
    formatterTime(val) {
      return val ? moment(val).format('YYYY-MM-DD HH:mm:ss') : '';
    },
  },
};
</script>

<style lang="less" scoped>
.Role {
  width: 100%;
  height: calc(100vh - 150px);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  position: relative;
  .position {
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .table {
    flex: 1;
    background: white;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    .tableTitle {
      width: 100%;
      height: 64px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #ececec;
      padding: 0 20px;
      margin-bottom: 10px;
      .title {
        width: 40%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 550;
      }
      .addButton {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    .tableList {
      // max-height: calc(100vh - 380px);
      // overflow: auto;
      /deep/ .tableScroll {
        max-height: calc(100vh - 380px);
        overflow: auto;
      }
    }
  }
}
#modalContent {
  width: 100%;
  height: 340px;
  position: relative;
  .formAspin {
    position: absolute;
    width: 100%;
    height: 340px;
    background: #ececec;
    border-radius: 4px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/deep/ .ant-col .ant-col-4{
  width: 20.666667%;
}
</style>
